<template>
  <div class="addTemplateIndex">
    <userHeader/>
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}"><a class="bread1">当前位置：首页  >  </a></router-link>
          <router-link :to="{path:'/catalog'}"><a class="bread2">流程目录 ></a></router-link>
          <a class="bread2">穿行测试模板</a>
      </span>
    </div>
    <!--<div class="navList">-->
        <!--<span class="sp1" @click="saveMergeTemplateData('form')">保存</span>-->
    <!--</div>-->
    <el-form ref="form" :model="form">
      <div  class="e-con-form">
        <h3 class="e-con-h3">穿行测试模板定义</h3>
      </div>
      <el-form-item label="模板名称" :label-width="formLabelWidth" >
        <el-input type="textarea"  autocomplete="off"  v-model="form.merge_template_name"></el-input>
      </el-form-item>
      <el-form-item label="评价方法" :label-width="formLabelWidth"  >
        <el-input type="textarea"  autocomplete="off" v-model="form.evaluation_method"></el-input>
      </el-form-item>
      <el-form-item label="提供资料" :label-width="formLabelWidth" >
        <el-input type="textarea"  autocomplete="off"  v-model="form.merge_template_needdatum"></el-input>
      </el-form-item>
      <el-form-item label="样本数量确定方法" :label-width="formLabelWidth">
        <el-input type="textarea"  autocomplete="off"  v-model="form.samplemethod"></el-input>
      </el-form-item>
      <el-form-item label="样本名称" :label-width="formLabelWidth" >
        <el-input type="textarea"  autocomplete="off" v-model="form.sample_name"></el-input>
      </el-form-item>
    </el-form>
    <div class="e-table">
      <el-table
        :data="form.merge_course"
        :row-class-name="tableRowClassName2"
        stripe
        border
        max-width="100%"
        v-if="">
        <el-table-column
          type="index"
          label="序号"
          width="86">
        </el-table-column>
        <el-table-column
          label="穿行测试过程"
          width="300">
          <template slot-scope="scope">
            <el-input v-model="scope.row.mergecourse_content"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="须取得资料"
          prop="testdocu"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.mergecourse_needdatum"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          width="170"
          label="操作">
          <template slot-scope="scope">
            <span style="cursor:pointer" @click.stop="deleteData(scope.row)">删除</span>
            <!--<span style="cursor:pointer">取消</span>-->
          </template>
        </el-table-column>
        <el-table-column></el-table-column>
      </el-table>
      <div class="addPoint" @click.sto="addPoint">添加指标+</div>
    </div>
    <div class="confirmBtnArray">
      <span class="sp1" @click="saveMergeTemplateData('form')">确定</span>
      <span class="sp2" @click="resetMergeTemplateData('form')">重置</span>
    </div>
  </div>
</template>
<script>
  import fixed from '@/components/fixed.vue'
  import userHeader from '@/components/header.vue'
  export default ({
    data(){
      return{
        formLabelWidth:'80px',
        form:{
          merge_template_name: "",
          evaluation_method: "",
          merge_template_needdatum: "",
          samplemethod: "",
          sample_name: "",
          merge_course: [
            {
              mergecourse_sort:1,
              mergecourse_content: "",
              mergecourse_needdatum: ""
            }
          ]
        }
      }
    },
    components: {
      userHeader,
      fixed,
    },
    created(){
      if(this.$route.query.is_add==1){
        // :merge_template_id
        this.editMergeTemplateData(this.$route.query.id).then(res=>{
          console.log(res)
          this.form = res.data.data
        })
      }
    },
    methods:{
        //数据重置
      resetMergeTemplateData(){
          this.form={
            merge_template_name: "",
            evaluation_method: "",
            merge_template_needdatum: "",
            samplemethod: "",
            sample_name: "",
            merge_course: [
              {
                mergecourse_sort:1,
                mergecourse_content: "",
                mergecourse_needdatum: ""
              }
            ]
          };
      },
      deleteData(row){
          console.log(row.index)
          this.form.merge_course.splice(row.index,1)
      },
      tableRowClassName2 ({row, rowIndex}) {
        //把每一行的索引放进row
        row.index = rowIndex;
      },
      //编辑穿行测试模板数据
      editMergeTemplateData(id){
        return this.axios.get('/api/v1/flow/mergetemplate/'+id)
      },
      //保存穿行测试模板数据
      saveMergeTemplateData(formName){
        if(this.$route.query.is_add==1){
        //编辑数据
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.axios.put("/api/v1/flow/mergetemplate/"+`${this.$route.query.id}`, this.form).then(res => {
                if(res.data.code==0){
                  this.$alert(res.data.message,"提示").then(()=>{
                    this.$router.back()
                  })
                }else {
                  this.$alert(res.data.message,"提示")
                }
              });
            } else {
              this.$alert("提交数据出了问题...", '提示')
              return false;
            }
          })
        }else if(this.$route.query.is_add==0){
        //新增数据
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.axios.post("/api/v1/flow/mergetemplate", this.form).then(res => {
                console.log(res)
                if(res.data.code==0){
                  this.$alert(res.data.message,"提示").then(()=>{
                    this.$router.back()
                  })
                }else {
                  this.$alert(res.data.message,"提示")
                }
              });
            } else {
              this.$alert("提交数据出了问题...", '提示')
              return false;
            }
          })
        }

      },
      addPoint(){
        var num = parseInt(this.form.merge_course[this.form.merge_course.length-1].mergecourse_sort) +1
          this.form.merge_course.push({
            mergecourse_sort:num,
            mergecourse_content: "",
            mergecourse_needdatum: ""
          })

      }
    }
  })
</script>
<style scoped>
.addTemplateIndex{
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  background-color: white;
}
.addTemplateIndex >>> .el-form  {
  width: 1400px;
  margin: 0 auto;
}
.addTemplateIndex >>> .el-form  .e-con-h3 {
  font-size: 20px;
  text-align: center;
  color: #000;
  font-weight: bold;
  height: 58px;
  line-height: 58px;
  margin-bottom: 20px;
}
.addTemplateIndex >>> .el-form  .el-textarea .el-textarea__inner{
  resize: none;
}
.addTemplateIndex >>> .el-form .el-form-item__label{
  line-height: 20px;
  color: #333333;
}
.addTemplateIndex >>> .e-table{
    margin-left: 28px;
    margin-right: 28px;
    margin-bottom: 50px;
}
.addTemplateIndex .el-table  >>>  th.is-leaf{
  background: #d3e9bb;
  height:58px;
}
.addTemplateIndex .addPoint{
    height:50px ;
    background:#8cc34b ;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 14px;

  }
.confirmBtnArray{
  text-align: center;
}
.confirmBtnArray span{
  display: inline-block;
  padding: 6px 20px;
  background: #8bc34a;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  font-size: 14px;
  color: white;
  margin-right: 7px;
  margin-top: 10px;
  cursor: pointer;
}
.confirmBtnArray .sp2{
  border: 1px solid #dadada;
  color: #b5b5b5;
  background: white;
  margin-left: 30px;
}
  @media screen and (max-width: 1400px) {
    .addTemplateIndex >>> .el-form{
      width: 1200px;
    }
    .addTemplateIndex{
      padding: 6px;
    }
  }
</style>
